<div class="bt-search">
    <div class="bt-box">
        <button nz-button nzType="primary" (click)="showModal(null)" *ngIf="permission.userPermission.has('stock:stockGoodsClassify:add')">新增</button>
    </div>
</div>
<main>
    <article style="max-width: 1200px;">
        <div class="hd">
            <ul>
                <li>名称</li>
                <li>ID</li>
                <li>排序</li>
                <li>状态</li>
                <li>创建时间</li>
                <li>操作</li>
            </ul>
        </div>
        <nz-tree [nzData]="listOfData" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
        <ng-template #nzTreeTemplate let-node let-origin="origin">
            <span class="custom-node">
                <span *ngIf="!node.isLeaf">
                    <span class="node-icon">
                      <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></i>
                      {{origin.name }}
                    </span>

                    <div class="text-box">
                        <!-- PID -->
                        <span class="node-class node-PId">{{origin.id}}</span>
                        <!-- 排序 -->
                        <span class="node-class node-sort">
                            {{origin.sort}}
                        </span>
                        <!-- 状态 -->
                        <span class="node-class node-status" [class]="'font-' + origin.state">
                          {{origin.state === 1 ?'启用':'禁用'}}
                        </span>
                        <!-- 创建时间 -->
                        <span class="node-class node-createTime">{{origin.createTime ?origin.createTime : '-'}}</span>
                        <div class="node-class">
                            <a nz-button nz-button-tdlink nzType="link" (click)="showModal(origin)" *ngIf="permission.userPermission.has('stock:stockGoodsClassify:edit')">编辑</a>
                            <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm
                                nzPopconfirmTitle="确定删除吗？删除后无法恢复" [nzIcon]="iconTpl" *ngIf="permission.userPermission.has('stock:stockGoodsClassify:delete')"
                                (nzOnConfirm)="deleteConfirm(origin)">删除</a>
                            <ng-template #iconTpl>
                                <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                            </ng-template>
                        </div>
                    </div>
                </span>
                <span *ngIf="node.isLeaf">
                    <span class="node-icon"><i nz-icon nzType="file"></i>{{ origin.name||'-' }}</span>
                    <div class="text-box">
                        <span class="node-class node-PId">{{origin.id}}</span>
                        <span class="node-class node-sort">{{origin.sort}}</span>
                        <span class="node-class node-status" [class]="'font-' + origin.state">
                          {{origin.state === 1 ?'启用':'禁用'}}</span>
                        <span class="node-class node-createTime">{{origin.createTime?origin.createTime : '-'}}</span>
                        <div class="node-class">
                            <a nz-button nz-button-tdlink nzType="link" (click)="showModal(origin)" *ngIf="permission.userPermission.has('stock:stockGoodsClassify:edit')">编辑</a>
                            <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm
                                nzPopconfirmTitle="确定删除吗？删除后无法恢复" [nzIcon]="iconTpl" *ngIf="permission.userPermission.has('stock:stockGoodsClassify:delete')"
                                (nzOnConfirm)="deleteConfirm(origin)">删除</a>
                            <ng-template #iconTpl>
                                <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                            </ng-template>
                        </div>

                    </div>
                </span>
            </span>
        </ng-template>
    </article>
</main>


<nz-modal [(nzVisible)]="isVisible" [nzTitle]="cacheData.id ? '编辑' : '新增'" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <form nz-form [formGroup]="modalForm" (ngSubmit)="submitForm()">
            <nz-form-item *ngIf="!modalForm.get('id')?.value || modalForm.get('pid')?.value > 0">
                <nz-form-label [nzSpan]="4">上一级分类</nz-form-label>
                <nz-form-control [nzSpan]="14">
                    <nz-tree-select [nzDisabled]="modalForm.get('id')?.value" style="width: 250px" [nzNodes]="SelectNodes" nzShowSearch nzPlaceHolder="请选择分类"
                        [(ngModel)]="value" formControlName="pid">
                    </nz-tree-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label nzRequired [nzSpan]="4">当前分类</nz-form-label>
                <nz-form-control [nzSpan]="14" nzErrorTip="请输入分类名称">
                    <input nz-input formControlName="name" [maxLength]="20" placeholder="" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4">Icon</nz-form-label>
                <nz-form-control [nzSpan]="14">

                    <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
                        <button nz-button nzType="default" (click)="onUpload($event)"><i nz-icon
                                nzType="upload"></i>本地图片</button>
                    </nz-upload>

                </nz-form-control>
            </nz-form-item>

            <nz-form-item *ngIf="modalForm.get('type')?.value == 1">
                <nz-form-label [nzSpan]="4">url</nz-form-label>
                <nz-form-control [nzSpan]="14">
                    <input nz-input formControlName="url" placeholder="" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4">排序</nz-form-label>
                <nz-form-control [nzSpan]="14">
                    <input nz-input formControlName="sort" id="sort" [maxLength]="20" placeholder="" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" nzRequired nzFor="state">状态</nz-form-label>
                <nz-form-control [nzSpan]="14">
                    <nz-radio-group formControlName="state" id="state">
                        <label nz-radio [nzValue]="1">启用</label>
                        <label nz-radio [nzValue]="0">禁用</label>
                    </nz-radio-group>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-control [nzSpan]="8" [nzOffset]="4">
                    <button nz-button nzType="primary" [nzLoading]="modalLoading">保存</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </ng-container>
</nz-modal>
